<template>
  <div>
    <el-dialog
      v-model="visible"
      :title="isAddStr === 'add' ? '新建' : '编辑'"
      class="add-vpc-port-dialog"
    >
      <el-form ref="formRef" :model="form" class="m-auto mt-1">
        <el-form-item label="协议" prop="protocol">
          <el-select
            filterable
            clearable
            v-model="form.protocol"
            class="w-full"
          >
            <el-option label="tcp" value="tcp"></el-option>
            <el-option label="udp" value="udp"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="外网端口" prop="out_port">
          <el-input v-model="form.out_port" />
        </el-form-item>
        <el-form-item label="内网IP" prop="in_ip">
          <el-input v-model="form.in_ip" />
        </el-form-item>
        <el-form-item label="内网端口" prop="in_port">
          <el-input v-model="form.in_port" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span>
          <el-button @click="visible = false">取 消</el-button>
          <el-button type="primary" @click="addOrEditPortMappingData">{{
            isAddStr === 'add' ? '新 建' : '确 定'
          }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, reactive, onUnmounted } from 'vue';
import { setObjectValue } from '@/utils/common';
import {
  addPortMappingByVPCApi,
  editPortMappingByVPCApi,
} from '@/api/vpc';
import { ElMessage } from 'element-plus';
import { emitter } from '@/utils/bus';

const emit = defineEmits(['updateData']);
// 表单
const isAddStr = ref('');
const visible = ref(false);
const formRef = ref(null);
const form = reactive({
  protocol: 'tcp',
  action: 'SNAT',
  out_port: '',
  in_port: '',
  in_ip: '',
});

/**
 * 确认添加入站策略
 */
const addOrEditPortMappingData = () => {
  formRef.value?.validate(async valid => {
    if (valid) {
      if (isAddStr.value === 'add') {
        addPortMappingByVPCApi(vpcID.value, form).then(res => {
          if (!(res instanceof Error)) {
            ElMessage.success('新建成功');
            visible.value = false;
            emit('updateData');
          }
        });
      } else {
        editPortMappingByVPCApi(vpcID.value, editObj.position, form, {}).then(
          res => {
            if (!(res instanceof Error)) {
              ElMessage.success('编辑成功');
              visible.value = false;
              emit('updateData');
            }
          },
        );
      }
    }
  });
};

// 编辑对象
let editObj = {};

// vpcID
const vpcID = ref(null);
const addOrEditPortMappingFunc = item => {
  visible.value = true;

  if (item.editObj) {
    isAddStr.value = 'edit';
    editObj = item.editObj;
    setObjectValue(form, item.editObj);
  } else {
    isAddStr.value = 'add';
  }

  vpcID.value = item.vpcID;
};

emitter.on('addOrEditPortMapping', addOrEditPortMappingFunc);

watch(
  visible,
  () => {
    if (!visible.value) {
      form.protocol = 'tcp';
      form.action = 'SNAT';
      form.out_port = '';
      form.in_port = '';
      form.in_ip = '';
    }
  },
  { immediate: false },
);

onUnmounted(() => {
  emitter.off('addOrEditPortMapping', addOrEditPortMappingFunc);
});
</script>
<style lang="scss" scoped>
:deep(.add-vpc-port-dialog) {
  width: 560px;
  .el-form {
    max-width: 460px;
    .el-form-item__label {
      width: 100px;
    }
  }
}
</style>
